<template>
<div class="repd">
	<common-dialog v-show="showDialog"  @update:setparent=" setparent " :close="true">
		<div class="redpack">
			<div class="title">可用红包</div>
			<div class="note">系统会自动为您选择激活红包最大收益的匹配方案，若您想激活其余红包，则需要增加相应的投资金额。</div>
			<div class="con">
				<coupon :items="redlist"></coupon>
			</div>
			<ul class="ux_row" style="padding:5px 10px;font-size:14px;">
				<li class="ux_flex">
					投资金额:
					<b class="tred">{{money}}元</b>
				</li>
				<li class="ux_flex">
					激活红包:
					<b class="tred">{{redPackData.reward}}元</b>
				</li>
			</ul>
			<ul class="ux_row">
				<li class="ux_flex tcenter">
					<input class="p_btn_nob" type="button" value="充值"  @click="goR()" />
				</li>
				<li class="ux_flex tcenter">
					<button v-bind:class="subBtn.class" v-bind:disabled="subBtn.disabled"  @click="goTender()" >{{subBtn.txt}} </button>
				</li>
			</ul>
		</div>
	</common-dialog>
</div>
</template>

<script>
import investOjb from "../controller/invest";
import api from "../data/api";
import CommonDialog from "./dialog"; //弹窗插件
import Coupon from "./coupon";
import { mapGetters, mapActions } from "vuex";

export default {
	props: {
		borrow_nid:'',
		money:'',
		items: []
	},

	components: {
		Coupon,
		CommonDialog
	},

	data() {
		return {
			redlist: [],
			subBtn: { txt: "确认投标", class: "p_btn", disabled: false },
			postBtn:{txt:'立即投标', class:'', disabled:false},
		};
	},

	computed: {
		...mapGetters(["showDialog", "redPackData"])
	},

	methods: {
		goR() {
			this.$route.router.go("/recharge_guide");
		},

		verMoney(){
			if(this.money == '') return 0;
			if(this.money == undefined) return 0;
			if(this.money == null) return 0;
			if(this.isInteger(this.money) == false) return 0;
			this.money = parseInt(this.money);
			if(this.money < 100) return 1;
			return 2;
		},

		setparent(params){
			this.$store.dispatch('setShowDialog', params.status)
		},

		process(key, close){

			if(close){
				this.$store.dispatch('setShowLoading', true), this.busy = true;
			}else{
				this.$store.dispatch('setShowLoading', false), this.busy = false;
			}

			switch (key) {
				case 1:
					if(close){
						this.postBtn.txt = '正在处理', this.postBtn.class = 'grey_btn', this.postBtn.disabled = true;
					}else{
						this.postBtn.txt = '立即投标', this.postBtn.class = '', this.postBtn.disabled = false;
					}
					break;
				case 2:
					if(close){
						this.subBtn.txt = '正在处理', this.subBtn.class = 'grey_btn', this.subBtn.disabled = true;
					}else{
						this.subBtn.txt = '确认投标', this.subBtn.class = 'p_btn', this.subBtn.disabled = false;
					}
					break;
			}
		},

		async goTender() {
			var vm = this;
			if (this.busy) return;

			var am = parseInt(this.money),
				bm = parseInt(this.redPackData.tender);

			if (am < bm) {
				this.alertData = {
					show: true,
					title: "信息提示",
					buttontxt: "确定",
					content: "投标金额小于活动条件金额,请重新选择红包!"
				};
				return;
			}

			var data = {
				borrow_nid: this.borrow_nid,
				money: this.money,
				couponArr: this.redPackData.id,
				ajax: "1"
			};
			this.process(2, true);
			var res = await investOjb.tender(data); //直接投标
			if (res.status == false) this.process(2, false);
		},

		async onSubmit() {
			var vm = this;
			if(this.busy) return;

			var rnum = this.verMoney();
			if(rnum == 0){
				this.alertData = { content: '金额输入有问题,请重新输入!', show: true, title: '信息提示', buttontxt: '确定'};
				return;
			}

			if(rnum == 1){
				this.alertData = { content: '金额请输入大于等于100元以上, 谢谢!', show: true, title: '信息提示', buttontxt: '确定'};
				return;
			}

			var data = {'borrow_nid': this.borrow_nid, 'money': this.money, 'ajax': '1'}
			this.process(1, true);
			var res = await investOjb.getRedPack(data);
			console.log(res)
			if(res.status == false){
				res = await investOjb.tender(data);
				if(res.status == false) this.process(1, false);
			}else{
				this.process(1, false);
			}
		}
	},
	ready(){
		investOjb.init({eventBus:this});
	}
};
</script>


<style lang="scss" scoped>
.grey_btn{
	background-color:#999!important;
}
</style>


<style lang="scss">
.repd{
	.dialog.active{
		width:95%!important;
	}

	.redpack{
		background-color:#fff;


		.title{
			font-size:16px;
			padding:5px 10px;
		}

		.note{
			font-size:12px;
			margin-bottom:10px;
			padding:0px 10px;
		}
		.con{
			background-color:#f4f8fb;
			padding:10px;
			padding-bottom:1px;
			height: 200px;
    		overflow-y: scroll;
		}

		.ux_flex{
			padding:5px 0px;
		}
		input, button{
			width:80%;
			padding:8px 0px;
			font-size:14px;
			&.p_btn{
				border:none;
			}
			&.grey_btn{
				color:#fff;
				border:none;
				border-radius: .1rem;
				background-color:#999!important;
			}

		}

		.coupon li .tag span{
			font-size:14px;
		}
		.coupon li .tag strong{
			    font-size: 16px;
		}
		.coupon li .info{
			width:56%;
		}
	}
}
</style>
